<template>
	<view>
		<view class="movie-main">
			<view class="movie-list" v-for="(item,index) in hotMovie" :key="index" @click="getUrl(item)">
				<image :src="item.pic" class="movie-img"></image>
				<view class="move">
					<view class="mo-info-top"> {{item.filmName}} </view>
					<view class="hydy">
						<view>
							<view class="rate-item">评分：{{item.score}}</view>
							<view class="rate-item">导演：{{item.director}}</view>
							<view class="rate-item">主演：{{item.cast}}</view>
							<view class="calss-item"> <text class="classify-item">{{item.duration}}分钟</text> </view>
						</view>
						<view class="movie-btns">购票</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { apiGetmovie } from '@/api/upapi.js';
 
	const pages = ref(1);
	const isNext = ref(false);
	const hotMovie = ref([]);
	
	// 获取热门影片
	const getMovie = async() => {
		try {
			let res = await apiGetmovie({
				page: pages.value,
				pageSize:10
			});
			if(res.data.result==0){
				var data = res.data.object.data
				if (pages.value == 1) {
					hotMovie.value = data
				} else {
					hotMovie.value = hotMovie.value.concat(data);
				}
				if (data.length >= 10) {
					pages.value = pages.value + 1;
				} else {
					isNext.value = true
				}
			} else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const getUrl =(e)=>{ uni.navigateTo({ url: '/pagesA/movie/cinema?title='+e.filmName+'&id='+e.filmId }) };
	
	onReachBottom(() => {
		if (!isNext.value) {
			getMovie(); 
		}
	});
	onLoad(() => {
		getMovie();
	});
</script>

<style lang="scss" scoped>
	.movie-main {
		padding: 30rpx;

		.movie-list {
			background-color: #FFFFFF;
			border-radius: 30rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.movie-img {
				width: 180rpx;
				height: 250rpx;
				border-radius: 20rpx;
			}
			.move{
				margin-left: 20rpx;
				height: 250rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				flex: 1;
				.mo-info-top {
					color: #2D3039;
					font-size: 28rpx;
					font-weight: 600;
					width: 100%;
					overflow: hidden;
					text-align: justify;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
				}
				.hydy{
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					.rate-item {
						color: #787A82;
						font-size: 24rpx;
						width: 300rpx;
						margin-top: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					
					.calss-item {
						display: flex;
						margin-top: 10rpx;
					
						.classify-item {
							padding: 6rpx 12rpx;
							border-radius: 6rpx;
							border: 2rpx solid #DADCE4;
							color: #A6A8AE;
							font-size: 20rpx;
						}
					}
					.movie-btns {
						margin-left: auto;
						width: 110rpx;
						height: 58rpx;
						background: linear-gradient(207deg,#ffe6ec 0%, #ff4a82 100%);
						border-radius: 29rpx;
						text-align: center;
						line-height: 58rpx;
						color: #FFFFFF;
						font-size: 24rpx;
						font-weight: 550;
					}
				}
			}
		}
	}
</style>